<template>
	<view class="uni-servicer-item bcl-white p-10" @tap="toDetailPage(item)">
		<!-- 店铺信息 -->
		<view class="info box border border-bottom pb-10">
			<view class="uni-avatar uni-avatar-lg mr-10">
				<image class="bcl-default" :src="item.avatar || item.shop_pic || defaultImage" />
			</view>
			<view class="box box-column box-between">
				<view class="name box">
					<view class="hide-text-2 fz-15 bold">{{
            item.name || item.shop_name
          }}</view>
					<view @click.stop="onLocationClick">
						<text style="color: #007AFF;margin-left: 40rpx;margin-right: 10rpx;">{{item.distance}}km</text>
					</view>
					<!-- 图标 -->
					<view class="shop-icon-list box box-center" v-if="item.auth">
						<!-- 银行卡 -->
						<view class="item" :class="{ active: item.auth.bank }"></view>
						<!-- 实名 -->
						<view class="item" :class="{ active: item.auth.realname }"></view>
						<!-- 邮箱 -->
						<view class="item" :class="{ active: item.email_status == 2 }"></view>
						<!-- 支付宝 -->
						<view class="item" :class="{ active: item.auth.alipay }"></view>
						<!-- 会员 -->
						<view class="item" :class="{ active: item.auth.enterprise }"></view>
						<!-- 会员等级 -->
						<view class="item" :style="{ 'background-image': 'url(' + item.user_logo + ')' }" v-if="item.user_logo"></view>
					</view>
				</view>
				<view class="service hide-text-2 cl-basic mt-10 mb-10">
					<!-- <text>服务范围：</text> -->
					<text class="label" v-for="(label, index) in item.skill" :key="index">{{item.explain}} {{ label }}</text>
					<text class="label" v-if="!item.skill || item.skill.length == 0">暂无</text>
				</view>
				<view class="rate box fz-12 cl-second">
					<!-- <view class="mr-20">
            <text class="cl-main mr-5">{{ item.good_comment_count || 0 }}</text>
            <text>条好评</text>
          </view> -->

					<view class="mr-20">
						<text>收入：</text>
						<text class="cl-main mr-5 bold">{{ item.total_money || 0 }}w</text>
					</view>

					<view>
						<text>好评率：</text>
						<text class="cl-main mr-5 bold">{{ item.percent || 0 }}%</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 其他信息 -->
		<view class="extra box box-between box-column-center mt-10">
			<view class="cl-second" v-if="item.city">
				<text class="icon icon-location fz-14"></text>
				<text>{{ item.city }}</text>
			</view>

			<view v-else></view>

			<!-- 收藏列表 slot  -->
			<slot name="value" v-if="type === 'collect'" @tap.stop></slot>

			<!-- v-else-if="item.shopId && item.shop_status == 1" -->
			<view>
				<!--<button class="uni-button block" @tap.stop="toChatPage(item.uid)">
          联系TA
        </button>-->
				<image src="/static/images/wx_im.png" style="width: 30px; height: 31px;" @tap.stop="toChatPage(item.id)"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "uniServicerItem",

		props: {
			item: {
				type: Object,
				default: () => {},
			},

			// 展示类型，作为收藏组件时传入 collect
			type: {
				type: String,
				default: "normal",
			},
		},

		data() {
			return {
				defaultImage: this.$config.default,
			};
		},

		methods: {
			onLocationClick(){
				console.log(this.item)
			
				uni.openLocation({
					longitude:this.item.location.lng,
					latitude: this.item.location.lat,
					name: this.item.name,
					address: this.item.address || ""
				})
			},
			toDetailPage(item) {
				console.log(item)

				if (item.can_see_detail == 0) {
					this.$toast("此用户没有投过您的标,不允许查看");
				} else {

					let {
						id,
						shopId,
						shop_status
					} = this.item;

					uni.navigateTo({
						url: `/service/detail?id=${shopId || id}&type=${
          (shopId && shop_status == 1) || this.type === "collect" ? 3 : 4
        }`,
					});

				}

			},
		},
	};
</script>

<style lang="scss" scoped>
	.uni-servicer-item {
		.info {
			.image {
				image {
					width: 180upx;
					height: 180upx;
				}
			}
		}

		.label {
			&:not(:last-child) {
				&::after {
					content: " / ";
				}
			}
		}
	}
</style>
